<!--
 * @Date: 2025-03-31 16:31:45
 * @LastEditTime: 2025-04-03 17:22:10
 * @FilePath: \LeagueBard\frontend\src\views\tools\components\selectDialog.vue
 * @Description: 选择英雄弹窗
-->
<script lang="ts" setup>
import LcuImage from '@/components/lcuImage.vue'
import { gameAssetManager } from '@/LcuApi/gameAsset'
import { defineEmits, ref } from 'vue'
import { useI18n } from 'vue-i18n'

const emits = defineEmits(['success'])

const { t } = useI18n()

const resolveCallback = ref(null)
const visible = ref(false)

const loading = ref(false)
const championList = ref()
const selectedChampion = ref([])
async function init(selected = []) {
  return new Promise(async (resolve, reject) => {
    resolveCallback.value = resolve
    visible.value = true
    loading.value = true
    selectedChampion.value = selected || []
    const arr = await gameAssetManager.getChampions()
    loading.value = false
    if (arr.length === 0) return
    championList.value = arr
  })
}

// 选择英雄
function selectChampion(row) {
  if (selectedChampion.value.length >= 5) return
  if (selectedChampion.value.some(item => item.id === row.id)) return
  selectedChampion.value.push(row)
}

// 上移
function upSelected(index) {
  console.log('index', index)
  if (index === 0) return
  const temp = selectedChampion.value[index]
  selectedChampion.value[index] = selectedChampion.value[index - 1]
  selectedChampion.value[index - 1] = temp
}
// 下移
function downSelected(index) {
  if (index === selectedChampion.value.length - 1) return
  const temp = selectedChampion.value[index]
  selectedChampion.value[index] = selectedChampion.value[index + 1]
  selectedChampion.value[index + 1] = temp
}
// 删除
function delSelected(index) {
  selectedChampion.value.splice(index, 1)
}

function isSelected(id) {
  return selectedChampion.value.some(item => item.id === id)
}

function handleOK() {
  resolveCallback.value && resolveCallback.value(selectedChampion.value)
  visible.value = false
}

function handleCancel() {
  visible.value = false
}

// 暴露方法
defineExpose({ init })
</script>

<template>
  <a-modal :title="t(`ChampionSelect.title`)" :visible="visible" width="80%" body-class="select_champion_dialog"
    @ok="handleOK" @cancel="handleCancel">
    <!-- 选择英雄 备选 -->
    <div class="champion_options">
      <div class="options_header"></div>
      <a-scrollbar outer-class="h-full pr-20px" class="options_main overflow-auto">
        <div v-for="item in championList" v-show="item.id > 0" :key="item.id" class="options_item">
          <a-tooltip :content="item.name" position="top" mini :disabled="isSelected(item.id)">
            <div class="item_image w-60px h-60px">
              <LcuImage :id="item.id" type="champion" @click="selectChampion(item)" />
            </div>
          </a-tooltip>
        </div>
      </a-scrollbar>
    </div>
    <!-- 已选择 -->
    <div class="selected_champion">
      <div v-for="item, index in selectedChampion" :key="item.id" class="champion_item flex items-center">
        <div class="text-12px font-bold">{{ index + 1 }}</div>
        <LcuImage :id="item.id" width="35px" height="35px" type="champion" radius="999px" />
        <div class="text-14px">{{ item.name }}</div>
        <div class="ml-auto flex">
          <div v-if="index !== 0" class="champion_item_icon" @click="upSelected(index)">
            <icon-arrow-up class="text-12px" />
          </div>
          <div v-if="index !== selectedChampion.length - 1" class="champion_item_icon" @click="downSelected(index)">
            <icon-arrow-down class="text-12px" />
          </div>
          <div class="champion_item_icon" @click="delSelected(index)">
            <icon-close class="text-12px" />
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<style lang="scss">
.select_champion_dialog {
  display: flex;
  padding: 10px;
  --selected-champion-width: 200px;

  .champion_options {
    height: 60vh;
    width: calc(100% - var(--selected-champion-width));

    .options_main {
      height: 100%;
      overflow: auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
      gap: 8px;

      .options_item {
        height: 60px;
        width: 100%;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        .item_image {
          border-radius: 10px;
          overflow: hidden;

          &[disabled=true] {
            filter: grayscale(90%);
            cursor: not-allowed;
          }
        }
      }
    }
  }

  .selected_champion {
    height: 100%;
    width: var(--selected-champion-width);

    .champion_item {
      cursor: pointer;
      border-radius: 4px;
      padding: 5px 12px;

      .champion_item_icon {
        width: 20px;
        height: 20px;
        border-radius: 999px;
        transition: all 0.3s ease;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0.7;

        &+.champion_item_icon {
          margin-left: 1px;
        }

        &:hover {
          background-color: #f5f5f5;
          opacity: 1;
        }
      }

      &+.champion_item {
        border-top: 1px solid #f5f5f5;
      }
    }
  }
}
</style>
